<template>
  <div>
    <el-dialog
      title="回水比例"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      draggable
      align-center
      width="500px"
      @closed="closed"
    >
      <div v-loading="state.loading">
        <div class="border rounded-[8px]">
          <div class="flex h-[36px] items-center px-[10px]">
            <span class="mr-[5px]">是否开启特殊回水</span>
            <el-switch v-model="state.isSpecialBackwater" :active-value="1" :inactive-value="2" />
          </div>
          <template v-if="state.isSpecialBackwater === 1">
            <div class="flex h-[36px] items-center border-top px-[10px]">
              <div class="w-[65px]pr-[5px]">修改全部</div>
              <div class="ml-[10px] flex items-center">
                <el-input-number
                  v-model="state.all"
                  class="!w-[100px]"
                  size="small"
                  :precision="2"
                  :step="0.01"
                  :max="100"
                  :min="0"
                  :controls="false"
                  @change="handleMaster"
                ></el-input-number>
                <span class="ml-[2px]">%</span>
              </div>
            </div>
            <div class="grid grid-cols-2">
              <section
                class="flex h-[36px] items-center border-top px-[10px]"
                v-for="(item, index) in state.list"
                :class="{
                  'border-right': index % 2 == 0
                }"
              >
                <div class="flex-1 w-0">{{ item.LotteryName }}</div>
                <div class="flex">
                  <el-input-number
                    class="!w-[80px]"
                    size="small"
                    :precision="2"
                    :step="0.01"
                    :max="100"
                    :min="0"
                    v-model="item.BackRate"
                    :controls="false"
                  />
                  <div class="ml-[2px]">%</div>
                </div>
              </section>
            </div>
          </template>
        </div>
        <p class="text-[10px] mt-[10px] text-[var(--el-color-danger)]">
          未开启特殊回水时，默认系统回水
        </p>
      </div>

      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button
          :disabled="state.updating"
          :loading="state.updating"
          type="primary"
          @click="confirm"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { message } from "@/utils/message";
import { debounce } from "lodash-es";
import { reqUserBackWaterBatch, reqUserBackWaterSetting } from "@/api/user";

type State = {
  loading: boolean;
  updating: boolean;
  isShow: boolean;
  isSpecialBackwater: number;
  all: number;
  list: BackWaterSettingMo["GameConfig"];
};

const props = defineProps({
  username: {
    type: String,
    default: ""
  },
  uid: {
    type: Number,
    default: 0
  },
  isSpecialBackwater: {
    type: Number,
    default: 0
  }
});

const state = reactive<State>({
  loading: false,
  updating: false,
  isShow: false,
  isSpecialBackwater: 1,
  all: 0,
  list: []
});
const emit = defineEmits(["update"]);

const getData = async () => {
  try {
    state.loading = true;
    const res = await reqUserBackWaterSetting(props.uid);
    state.list = res.data.GameConfig.map(item => {
      return {
        ...item,
        Type: item.Type || 1
      };
    });
    state.isSpecialBackwater = res.data.IsSpecialBackwater;
    state.loading = false;
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};

const handleMaster = (val: number) => {
  state.list.forEach(item => {
    item.BackRate = val;
  });
};

const closed = () => {
  state.isShow = false;
  state.all = 0;
};

const confirm = debounce(
  async () => {
    state.updating = true;
    try {
      await reqUserBackWaterBatch({
        UserId: props.uid,
        IsSpecialBackwater: state.isSpecialBackwater,
        List: state.list.map(item => {
          return {
            LotteryId: item.LotteryId,
            BackRate: item.BackRate,
            Type: item.Type
          };
        })
      });
      state.updating = false;
      message.success("修改回水比例成功");
      emit("update");
      closed();
    } catch (error) {
      state.updating = false;
      console.log(error);
    }
  },
  500,
  { leading: true, trailing: false }
);

const open = () => {
  state.isShow = true;
  state.isSpecialBackwater = props.isSpecialBackwater;
  getData();
};

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
